<template>
	<!-- 使用弹性布局,实现"两翼分居布局" -->
	<view class="container">
		<!-- 提示:数值滚动视图,必须指定高度,否则会把页面撑高 -->
		<!-- 左侧:滚动视图 -- 商品类目列表 -->
		<scroll-view scroll-y="true" class="left-view" :style="{height:winHeight+'px'}">
			<uni-list>
				<uni-list-item v-for="(c,i) in categories" :key="i" :title="c.cname"
					:style="{backgroundColor: cur===i ? '#fff':'#dfdfdf'}" @click="cur = i" clickable></uni-list-item>
			</uni-list>
		</scroll-view>
		<!-- 右侧:滚动视图 -- 从属与当前类目下的商品列表 -->
		<scroll-view scroll-y="true" class="right-view" :style="{height:winHeight+'px'}">
			<text v-show="products.length === 0" style="width: 100%; text-align: center;">暂无数据</text>
			<uni-list>
				<uni-list-item v-for="{lid,pic,title} in products" :key="lid" :title="title" link="" :ellipsis="2"
					:thumb="base+pic" thumbSize="lg" :to="`/pages/details/details?pid=${lid}`"></uni-list-item>
			</uni-list>
			<button type="primary" v-show="hasMore" @click="goToList">加载更多</button>
		</scroll-view>
	</view>
</template>

<script>
	import {
		base,
		productCategory,
		productList
	} from '../../service'
	export default {
		data() {
			return {
				base: base,
				winHeight: 0, //窗口中内容可用区域高度
				categories: [], //商品类目列表
				cur: -1, //当前显示那个类目下的商品 current
				//注意:此处的cur初始值没有使用0,而是-1  -- 数组中没有此下标
				products: [], //商品列表
				hasMore:false,   //还有更多数据可供加载吗?
			}
		},
		async onLoad() {
			//1.获取当前系统信息(之窗口可用高度)
			//uni.getSystemInfo() //异步的,通过回调方式获取结果
			//uni.getSystemInfoSync() //同步的,通过返回值获取结果
			let {
				windowHeight
			} = uni.getSystemInfoSync()
			this.winHeight = windowHeight
			//2.访问后端接口,获取商品列表
			let data = await productCategory()
			this.categories = data.concat(data)
			this.cur = 0 //加载完数据,让类别中的第0个成为"当前项"
		},
		methods: {
			goToList(){
				//跳转到商品列表页,跳转是携带参数:kw
				let kw = this.categories[this.cur].keywords
				uni.navigateTo({
					url:`/pages/list/list?kw=${kw}`
				})
			}
		},
		watch: {
			async cur(newValue, oldValue) {
				//在watch中监视同名模型数据的改变
				// console.log('cur:',this.cur)
				let kw = this.categories[this.cur].keywords
				let {
					data,pno,pageCount
				} = await productList(1, kw)
				this.products = data
				if(pno<pageCount){
					this.hasMore = true
				}else{
					this.hasMore =false
				}
			}
		},
	}
</script>

<style lang="scss">
	.container {
		//弹性容器的主轴方向:横轴
		flex-direction: row;

		.left-view {
			width: 90px;
			//弹性子元素的增长权重:0
			flex-grow: 0;
			//弹性子元素的收缩权重:0
			flex-shrink: 0;
			background-color: $uni-text-color-grey;
		}

		.right-view {
			//弹性子元素尺寸增长权重:1
			flex: 1;
		}
	}
</style>
